<template>
  <div cl>
    <!-- 学科  -->
    <el-card class="box-card">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        :inline="true"
        class="formMar"
      >
        <el-row>
          <el-col :span="22">
            <el-form-item label="学科名称">
              <el-input v-model="form.subjectName"> </el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearFn">清除</el-button>
              <el-button type="primary" @click="onSubmit"> 搜索 </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-button type="success" @click="showDialog = true">
                <i class="el-icon-edit"></i>
                新增学科</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert type="info" :closable="false" class="incoTitle">
        <i class="el-icon-info" style="font-size: 16px"></i>
        数据一共{{ counts }}条
      </el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" :index="indexFn" label="序号" sortable="">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template #default="{ row }">
            {{ row.addDate | timefilter('YYYY年MM月DD日') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
          :formatter="formatterFn"
        >
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="260px">
          <template #default="{ row }">
            <el-button type="text" @click="$router.push('contents')">
              学科分类
            </el-button>
            <el-button type="text" @click="$router.push('label')">
              学科标签
            </el-button>
            <el-button type="text" @click="editSuj(row.id)"> 修改 </el-button>
            <el-button type="text" @click="delFn(row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="counts"
      >
      </el-pagination>
      <!-- 弹框 -->
      <el-dialog
        :title="showTitle"
        :visible="showDialog"
        @close="closeDialog"
        width="30%"
      >
        <el-form
          :model="subForm"
          ref="subForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input
              v-model="subForm.subjectName"
              placeholder="请输入学科名称"
              style="width: 120%"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch
              v-model="subForm.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <!-- footer插槽 -->
        <template v-slot:footer>
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="submitFn">确 定</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getSubjectsListApi,
  getSubjectsApi,
  delSubjectsApi,
  editSubjectsApi,
  addSubjectsApi
} from '@/api/subject'

export default {
  data() {
    return {
      form: {
        subjectName: '',
        page: 1,
        pagesize: +10
      },
      tableData: [],
      currentPage: 1,
      pagesize: +10,
      counts: 0,
      page: 1, // 当前页码
      showDialog: false,
      subForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      rules: {
        subjectName: [
          {
            required: true,
            message: '用户姓名不能为空',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  computed: {
    // 控制标题显示不同名字
    showTitle() {
      return this.subForm.id ? '编辑学科' : '新增学科'
    }
  },
  methods: {
    // 搜索
    async onSubmit() {
      await getSubjectsListApi(this.form)
      // console.log(this.form.subjectName)
    },
    // 清除
    clearFn() {},
    // 编辑
    async editSuj(id) {
      this.showDialog = true
      // 数据回显
      const { data } = await getSubjectsApi(id)
      console.log(data)
      this.subForm = data
    },
    // 确认
    async submitFn() {
      // 判断添加还是编辑
      if (this.subForm.id) {
        // 有id走编辑接口
        await editSubjectsApi(this.subForm)
      } else {
        // 走新增
        if (this.subForm.subjectName === '') {
          this.$message.error('学科名称不能为空')
          return
        }
        await addSubjectsApi(this.subForm)
      }
      this.getSubjectsList()
      this.closeDialog()
    },
    // 取消
    closeDialog() {
      this.showDialog = false
      this.subForm = {
        subjectName: '', // 所属学科
        isFrontDisplay: 1
      }
      //   重置校验
      this.$refs.subForm.resetFields()
    },
    // 删除
    async delFn(id) {
      // 删除要加二次确认
      this.$confirm('此操作将永久删除该学科, 是否继续?', '温馨提示')
        .then(async () => {
          await delSubjectsApi(id)
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          // 删除成功后，重新渲染
          this.getSubjectsList()
          this.$message.success('删除成功')
        })
        .catch(() => {
          // console.log('点击了取消')
        })
    },
    // 序号换行解决
    indexFn(index) {
      // 每页index是递增
      // console.log(index)
      // 每页的第一条数据的序号 = 1 + 前面页的总条数
      return index + 1 + (this.form.page - 1) * this.form.pagesize
    },
    // 每页条数变化了，会切换每页的条数
    handleSizeChange(val) {
      this.form.pagesize = +val //  每页显示条目个数
      this.form.page = 1
      this.getSubjectsList()
      // console.log(`每页 ${val} 条`)
    },
    // 当前页码变换，改变当前页触发执行
    handleCurrentChange(val) {
      this.form.page = val // 当前页码
      this.getSubjectsList()
      // console.log(`当前页: ${val}`)
    },
    // 列表
    async getSubjectsList() {
      const { data } = await getSubjectsListApi(this.form)
      // console.log(data)
      this.tableData = data.items
      this.form.pagesize = +data.pagesize
      this.counts = data.counts
      this.form.page = data.page
    },
    // 处理前台是否显示
    formatterFn(row, column, cellValue, index) {
      if (cellValue === 1 || cellValue === '1') {
        return '是'
      } else if (cellValue === 0) {
        return '否'
      }
      // console.log(row, column, cellValue, index)
      return cellValue
    }
  },
  async created() {
    this.getSubjectsList()
  }
}
</script>
<style scoped lang="scss">
* {
  margin: 0;
}
.box-card {
  padding-right: 15px;
  margin-top: 50px;
  .formMar {
    margin-left: -20px;
  }
  ::v-deep .el-form-item__content {
    width: 220px;
  }
  .incoTitle {
    margin-top: 20px;

    ::v-deep .el-alert__description {
      font-size: 16px;
    }
  }
  .test {
    margin-right: 5px;
    color: #46abee;
  }
}
::v-deep .el-dialog__header {
  background-color: #409eff;

  .el-dialog__title {
    font-size: 20px;
    color: #fff;
  }
}
</style>
